<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Input Autocomplete Suggestions Demo</title>
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
</head>

<body>
  <div id="topbar"><a href="http://designshack.net">Back to Design Shack</a></div>
  <div id="w">
    <div id="content">
      <h1>World Currencies Autocomplete Search</h1>
      <p>Just start typing and results will be supplied from the JavaScript. Check out <a href="https://github.com/devbridge/jQuery-Autocomplete">jQuery Autocomplete</a> on Github.</a></p>
      
      <div id="searchfield">
        <form><input type="text" name="currency" class="biginput" id="autocomplete"></form>
      </div><!-- @end #searchfield -->
      
      <div id="outputbox">
        <p id="outputcontent">Choose a currency and the results will display here.</p>
      </div>
    </div><!-- @end #content -->
  </div><!-- @end #w -->
<script>
    $(function(){
        var currencies = [
            { value: '长沙', data: 'AFN' },
            { value: '长城', data: 'ALL' },
            { value: '北京', data: 'DZD' },
            { value: '北方', data: 'EUR' },
        ];

        // setup autocomplete function pulling from currencies[] array
        $('#autocomplete').autocomplete({
            lookup: currencies,
            onSelect: function (suggestion) {
                /*var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value +
                    ' <br> <strong>Symbol:</strong> ' + suggestion.data;
                $('#outputcontent').html(thehtml);*/
            }
        });


    });
</script>
</body>
</html>